<template>
 
	<view class="content" :class="{'active':active}">
	 
		<view class="call-1">
			<view class="call-11-label">
				<label>全国产地货源</label>
			</view>
			<view class="call-12-label">
				<image class="laihui" src="../../../static/home/左右.png"></image>
			</view>	
			<view class="call-11-label">
				<label>北京新发地市场</label>
			</view>					 
		 </view>
 
		
		<view class="tabbar-box-wrap">
			<view class="tabbar-box">
			
				<view class="tabbar-box-item" @click="goToPage('/pages/issue-purchase/issue-purchase')">
					 
					<view> 
						<view class="explain2">(免费)</view>
						<image class="box-image" src="../../../static/home/采购.png" mode="aspectFit"></image>
						<view class="explain">找货</view>
					</view> 
				</view>
				<view class="tabbar-box-item" @click="goToPage('/pages/issue-source/issue-source')">
					<view>
						<view class="explain2">(免费)</view>
						<image class="box-image" src="../../../static/home/货源.png" mode="aspectFit"></image>
						<view class="explain">卖货</view>
					</view> 
				</view> 
				<!-- 关闭按钮 -->
				<!-- <image class="box-image" src="../../../static/img/tabbar/close1.png"></image> -->
			</view>
		</view>
	</view>
</template> 

<script>
	import app from '@/App.vue'
export default {
	data() {
		return {
			active: false
		};
	},
	onLoad() {
		app.navTitle();
	},
	onShow() {
		// setTimeout(() => {
		this.active = true;
		// }, 500);
	},
	onHide() {
		this.active = false;
	},
	methods: {
		goToPage(url) {
			if (!url) return;
			uni.navigateTo({
				url
			});
		},
		close(){
			console.log("关闭模态框")
		}
	}
};
</script>

<style lang="scss" scoped>
	.laihui{
		height: 20px;
		width: 30px;
	}
	.call-11-label uni-label{
		font-weight: bold;
		color: #43CF7C;
	}
	.call-1{
		display: flex;
		text-align: center;
		margin-top: 10px;
		margin-bottom: 10px;
		width: 100%;
	}
	.call-11-label{
		flex: 1;
		font-size: 16px;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 20px;
		 
		 
	} 
	.call-12-label{
		flex: 0.5;
		font-size: 16px;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 20px;
		 
		 
	} 
.imageClass{
 
    height: 600px;
    width: 100%;
}
.content {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 100%;
	/* #ifdef H5 */
	height: calc(100vh - var(--window-bottom) - var(--window-top));
	/* #endif */
	/* #ifndef H5 */
	height: 100vh;
	/* #endif */
	transition: opacity 0.3s;
	background: #fff;
	opacity: 0;
	&.active {
		opacity: 1;
	}
	.logo {
		position: relative;
		margin-top: -400upx;
		width: 200upx;
		height: 200upx;
		// z-index: -1;
		opacity: 0;
		transition: opacity 0.3s;
		&.active {
			opacity: 1;
		}
	}
}
.tabbar-box-wrap {
	position: absolute;
	width: 100%;
	padding: 50upx;
	box-sizing: border-box;
	bottom: 0;
	left: 0;
	.tabbar-box {
		width: 100%;
		background: #fff;
		border-radius: 30upx;
		padding: 50upx 	50upx;
		box-sizing: border-box;
		margin-top: 20px;
		z-index: 2;
		display: flex;
		box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.1);
		
		.tabbar-box-item {
			position: relative;
			width: 100%;
			z-index: 3;
			height: 180rpx;
			color: $uni-color-subtitle;
			display: flex;
			justify-content: center;
			text-align: center;
			.box-image {
				width: $uni-img-size-lg;
				height: $uni-img-size-lg;
				margin-top: 3px;
			 
			 
				 
			}
			.explain{
			 
				font-size: 15px;
				color: #000;
				font-weight: bold;
			}
			.explain2{
				font-size: 10px;
				color: #ef1c56;
			}
		}
	}
}
</style>
